Redesign Teams tab with dropdown team selection, multi-line comparison charts, and bar chart visualizations #236
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Co-authored-by: karpikpl <[email protected]>
Copilot
AI
changed the title
Copilot finished work on behalf of
karpikpl
July 9, 2025 18:46
|
@copilot resolve conflicts with main. for selected teams - provide a link to view details that will take the user to either:
when teams are selected from a dropdown, show data in a similar way to "github.com" tab, where each plot line represents one team. Do not show model usage, but:
compare languages and IDEs used by each team Seat Analysis Tab should only show users in selected team (when using /orgs/octo-demo-org/teams/the-a-team or /enterprises/octo-demo-ent/teams/the-a-team) |
Co-authored-by: karpikpl <[email protected]>
✅ All requirements implemented successfully! The Teams tab has been completely redesigned with: 🎯 Key Features:
📊 Implemented Charts:
🔄 Team Comparison Tables:
🧪 Testing:
The implementation provides seamless team comparison and navigation exactly as requested. (Commit: c16f898) Warning Firewall rules blocked me from connecting to one or more addressesI tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Copilot
AI
changed the title
Copilot finished work on behalf of
karpikpl
August 7, 2025 18:25
|
@copilot much better!
|
…mparison - Fixed v-chip styling issues in team selection dropdown (added color="primary" and variant="outlined") - Fixed selected teams chips styling (changed to variant="tonal" for better visibility) - Replaced language/editor comparison tables with interactive bar charts - Added Bar chart component import from vue-chartjs with BarElement registration - Implemented generateBarChartData() function for chart data transformation - Updated chart clearing logic to include bar chart data - All 85 tests passing, styling issues resolved Co-authored-by: karpikpl <[email protected]>
... ✅ Styling issues fixed and bar charts implemented! 🎨 Styling Fixes:
📊 Bar Charts Implementation:
🔄 Note on merging main: All 85 tests passing ✅ (Commit: e834071) Warning Firewall rules blocked me from connecting to one or more addressesI tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Copilot
AI
changed the title
Copilot finished work on behalf of
karpikpl
August 7, 2025 19:23
* Initial plan * Initial exploration and setup complete Co-authored-by: karpikpl <[email protected]> * Implement Agent Mode Statistics display with models used by users Co-authored-by: karpikpl <[email protected]> * Rename agent mode to GitHub.com and update terminology Co-authored-by: karpikpl <[email protected]> * Merge with main and move GitHub.com calculations to backend Co-authored-by: karpikpl <[email protected]> * model info * Update e2e-tests/pages/GitHubTab.ts Co-authored-by: Copilot <[email protected]> * Update app/components/AgentModeViewer.vue Co-authored-by: Copilot <[email protected]> * Update server/api/github-stats.ts Co-authored-by: Copilot <[email protected]> * Update e2e-tests/pages/GitHubTab.ts Co-authored-by: Copilot <[email protected]> * code cleanup after copilot made a mess --------- Co-authored-by: copilot-swe-agent[bot] <[email protected]> Co-authored-by: karpikpl <[email protected]> Co-authored-by: Piotr Karpala <[email protected]> Co-authored-by: Piotr Karpala <[email protected]> Co-authored-by: Copilot <[email protected]>
Update for version 2.0.7
…238) Bumps the npm_and_yarn group with 1 update in the / directory: [@eslint/plugin-kit](https://github.com/eslint/rewrite/tree/HEAD/packages/plugin-kit). Updates `@eslint/plugin-kit` from 0.2.4 to 0.2.8 - [Release notes](https://github.com/eslint/rewrite/releases) - [Changelog](https://github.com/eslint/rewrite/blob/main/packages/plugin-kit/CHANGELOG.md) - [Commits](https://github.com/eslint/rewrite/commits/plugin-kit-v0.2.8/packages/plugin-kit) --- updated-dependencies: - dependency-name: "@eslint/plugin-kit" dependency-version: 0.2.8 dependency-type: indirect dependency-group: npm_and_yarn ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Bumps the npm_and_yarn group with 3 updates in the / directory: [esbuild](https://github.com/evanw/esbuild), [@eslint/plugin-kit](https://github.com/eslint/rewrite/tree/HEAD/packages/plugin-kit) and [eslint](https://github.com/eslint/eslint). Updates `esbuild` from 0.25.6 to 0.25.7 - [Release notes](https://github.com/evanw/esbuild/releases) - [Changelog](https://github.com/evanw/esbuild/blob/main/CHANGELOG.md) - [Commits](evanw/esbuild@v0.25.6...v0.25.7) Updates `@eslint/plugin-kit` from 0.2.8 to 0.3.4 - [Release notes](https://github.com/eslint/rewrite/releases) - [Changelog](https://github.com/eslint/rewrite/blob/main/packages/plugin-kit/CHANGELOG.md) - [Commits](https://github.com/eslint/rewrite/commits/plugin-kit-v0.3.4/packages/plugin-kit) Updates `eslint` from 9.17.0 to 9.32.0 - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](eslint/eslint@v9.17.0...v9.32.0) --- updated-dependencies: - dependency-name: esbuild dependency-version: 0.25.7 dependency-type: direct:development dependency-group: npm_and_yarn - dependency-name: "@eslint/plugin-kit" dependency-version: 0.3.4 dependency-type: indirect dependency-group: npm_and_yarn - dependency-name: eslint dependency-version: 9.32.0 dependency-type: direct:production dependency-group: npm_and_yarn ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
|
@copilot take a look because after merge the component is broken :( |
… MainComponent.vue Co-authored-by: karpikpl <[email protected]>
Fixed! The issue was that during the merge with main, the All features are working as expected:
(Commit: 964b67e) Warning Firewall rules blocked me from connecting to one or more addressesI tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Copilot finished work on behalf of
karpikpl
August 7, 2025 21:42
karpikpl
reviewed
Aug 8, 2025
|
@copilot can you check and fix playwright test? |
There was a problem hiding this comment.
Pull Request Overview
This PR redesigns the Teams tab from static comparison tables to an interactive multi-select interface with enhanced visualizations. The redesign introduces dropdown team selection, multi-line comparison charts similar to the github.com tab, and bar chart visualizations for language/editor usage by team.
- Adds interactive team selection with multi-select dropdown and removable chips with direct team links
- Implements multi-line charts showing team metrics over time (acceptance rates, usage counts, active users)
- Introduces bar chart visualizations for language and editor usage comparison across teams
- Integrates team filtering into seats analysis when viewing individual team pages
Reviewed Changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| app/components/TeamsComponent.vue | New component implementing interactive team selection and multi-line/bar chart visualizations |
| server/api/teams.ts | New API endpoint for fetching team lists with pagination and caching |
| server/api/seats.ts | Enhanced with team member filtering functionality for team-specific seat analysis |
| app/model/Options.ts | Added methods for generating teams and team members API URLs |
| app/model/Seat.ts | Added plan_type property to seat model |
| app/components/SeatsAnalysisViewer.vue | Updated UI text to show team-specific filtering when viewing individual teams |
| app/components/MainComponent.vue | Integrated teams tab and fixed tab name transformation logic |
| app/assets/global.css | Added comprehensive styling for teams dropdown, chips, and data table components |
| tests/MainComponent.teams.spec.ts | Unit tests for tab name transformation and teams tab addition logic |
| nuxt.config.ts | Added global CSS import |
| .vscode/settings.json | Added file watcher exclusions for development |
Comment on lines
+497
to
+499
| perTeamData.forEach(t => t.metrics.forEach((m) => { if (m.day) daySet.add(m.day) })) | ||
| // usage array uses 'date' property; ensure inclusion if metrics empty | ||
| perTeamData.forEach(t => t.usage.forEach((u) => { if (u.date) daySet.add(u.date) })) |
There was a problem hiding this comment.
[nitpick] The nested forEach calls with inline arrow functions reduce readability. Consider extracting to separate functions or using more explicit iteration patterns.
Suggested change
| perTeamData.forEach(t => t.metrics.forEach((m) => { if (m.day) daySet.add(m.day) })) | |
| // usage array uses 'date' property; ensure inclusion if metrics empty | |
| perTeamData.forEach(t => t.usage.forEach((u) => { if (u.date) daySet.add(u.date) })) | |
| for (const t of perTeamData) { | |
| for (const m of t.metrics) { | |
| if (m.day) daySet.add(m.day) | |
| } | |
| } | |
| // usage array uses 'date' property; ensure inclusion if metrics empty | |
| perTeamData.forEach(t => t.usage.forEach((u) => { if (u.date) daySet.add(u.date) })) | |
| for (const u of t.usage) { | |
| if (u.date) daySet.add(u.date) | |
| } | |
| } |
Copilot uses AI. Check for mistakes.
Comment on lines
+132
to
135
| const status = typeof error === 'object' && error && 'statusCode' in error ? (error as { statusCode?: number }).statusCode : 500; | ||
| return new Response('Error fetching seats data. Error: ' + String(error), { status: status || 500 }); | ||
| } | ||
|
|
There was a problem hiding this comment.
The error handling logic is complex and could be simplified using a type guard function to check for FetchError or create a proper error type hierarchy.
Suggested change
| const status = typeof error === 'object' && error && 'statusCode' in error ? (error as { statusCode?: number }).statusCode : 500; | |
| return new Response('Error fetching seats data. Error: ' + String(error), { status: status || 500 }); | |
| } | |
| const status = isFetchError(error) ? error.statusCode : 500; | |
| return new Response('Error fetching seats data. Error: ' + String(error), { status: status || 500 }); | |
| } | |
| // Type guard for FetchError (or similar error shape) | |
| function isFetchError(error: unknown): error is { statusCode: number } { | |
| return ( | |
| typeof error === 'object' && | |
| error !== null && | |
| 'statusCode' in error && | |
| typeof (error as any).statusCode === 'number' | |
| ); | |
| } |
Copilot uses AI. Check for mistakes.
Co-authored-by: Copilot <[email protected]>
karpikpl
reviewed
Aug 11, 2025
| let val: unknown = usageDay | ||
| for (const segment of path) { | ||
| // Dynamic traversal through nested objects using optional chaining | ||
| val = val?.[segment] |
There was a problem hiding this comment.
@copilot linter complains about this line
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.
No index signature with a parameter of type 'string' was found on type '{}'.ts-plugin(7053)
karpikpl
reviewed
Aug 11, 2025
| (m.breakdown || []).forEach((b) => { | ||
| if (b.language) { | ||
| if (!langAgg[b.language]) langAgg[b.language] = { suggestions: 0, acceptances: 0 } | ||
| langAgg[b.language].suggestions += b.suggestions_count || 0 |
There was a problem hiding this comment.
linter error
Object is possibly 'undefined'.ts-plugin(2532)
There was a problem hiding this comment.
@copilot can you take a look?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR completely redesigns the Teams tab functionality based on user feedback to provide a more intuitive and powerful team comparison experience with enhanced visualizations.
🔄 Major Changes
Before: Static Team Comparison Tables
The original implementation showed all teams in static comparison tables with aggregated metrics, which was not user-friendly for organizations with many teams.
After: Interactive Team Selection with Multi-Line Charts and Bar Visualizations
Team Selection Interface:
Multi-Line Chart Visualization:
Similar to the "github.com" tab, each chart now displays multiple lines where each line represents one selected team:
Bar Chart Visualizations:
Enhanced Team Navigation:
/orgs/org/teams/team-nameor/enterprises/ent/teams/team-name🎯 Seats Analysis Integration
Modified the Seats Analysis tab to automatically filter by team when viewing individual team pages:
🐛 Critical Fix Applied
Resolved Teams Component Rendering Issue:
After the merge with main branch, the Teams component was not rendering due to a missing template directive in MainComponent.vue. This has been fixed by adding the missing
<TeamsComponent>line to ensure proper component rendering.🧪 Technical Implementation
- Chart.js Integration: Multi-dataset line charts and bar charts with color-coded team identification
- Mock Data: Demonstrates functionality with 5 sample teams showing realistic metrics
- Responsive Design: Uses existing Vuetify components for consistency with proper theming
- Date Range Integration: Full compatibility with existing date range filtering
- Zero Breaking Changes: All existing functionality preserved, 85/85 tests passing
This redesign transforms the Teams tab from a static overview into an interactive comparison tool that scales well for organizations of any size while providing clear navigation paths to detailed team-specific metrics and enhanced visualizations for better data analysis.
Fixes #235.
💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.